<template>
	<view class="content">
		<view class="register-form">
      <u-form
				labelPosition="top"
				:model="loginForm"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
					label="用户名"
					prop="username"
					borderBottom
				>
					<u-input
						v-model="loginForm.username"
						placeholder="请输入用户名"
						border="none"
					>
					</u-input>
				</u-form-item>
        <u-form-item
					label="密码"
					prop="confirmPassword"
					borderBottom
				>
					<u-input
						v-model="loginForm.confirmPassword"
            password
						placeholder="请输入密码"
						border="none"
					>
					</u-input>
				</u-form-item>
        <u-form-item
					label="确认密码"
					prop="confirmPasswordCopy"
					borderBottom
				>
					<u-input
						v-model="loginForm.confirmPasswordCopy"
            password
						placeholder="请再次输入密码"
						border="none"
					>
					</u-input>
				</u-form-item>
				<u-form-item
					label="图形验证码"
					prop="code"
					borderBottom
			>
				<view class="imageCode-content">
					<u-input
						v-model="loginForm.code"
						placeholder="请输入图形验证码"
						border="none"
					></u-input>
					<image class="imageCode-content-img" :src="codeUrl" alt="" @click="getCode"></image>
				</view>
			</u-form-item>
			</u-form>
    </view>
    <view class="btns">
      <u-button type="info" @click="register">注册</u-button>
      <u-button type="default" @click="back">取消</u-button>
    </view>
	</view>
</template>

<script>
	import api from '../../request/api/login'
	const baseForm = {
		username: '',
		confirmPassword: '',
		confirmPasswordCopy: '',
		code: '',
		uuid: ''
	}
	export default {
		data() {
			return {
				// 验证码开关
				showCaptchaEnabled: true,
				loginForm: {...baseForm},
				rules: {
					username: [{ required: true, message: '请填写用户名', trigger: ['blur'] }],
					confirmPassword: [
						{ required: true, message: '请填写密码', trigger: ['blur']}, 
						{
							validator: (rule, value, callback) => {
								if (this.loginForm.confirmPasswordCopy && value !== this.loginForm.confirmPasswordCopy) callback(new Error('两次输入的密码不一致'));
								else callback();
							},
							trigger: ['blur']
						}
					],
					confirmPasswordCopy: [
						{ required: true, message: '请再次填写密码', trigger: ['blur']}, 
						{
							validator: (rule, value, callback) => {
								if (this.loginForm.confirmPassword && value !== this.loginForm.confirmPassword) callback(new Error('两次输入的密码不一致'));
								else callback();
							},
							trigger: ['blur']
						}
					],
					code: [{ required: true, message: '请填写图形验证码', trigger: ['blur'] }]
				},
				codeUrl: ''
			}
		},
		computed: {
		},
		onLoad() {
			this.$refs.uForm.setRules(this.rules)
		},
		async onShow() {
			await this.getCode()
		},
		methods: {
      back(){
        uni.navigateBack()
      },
			async resetLoginForm(){
				Object.assign(this.loginForm, baseForm)
				await this.getCode()
			},
			async getCode() {
				const {data: captchaEnabled, img, uuid} = await api.getCodeImg()
				this.showCaptchaEnabled = captchaEnabled === undefined ? true : captchaEnabled
				if (this.showCaptchaEnabled) {
					this.codeUrl = "data:image/gif;base64," + img
					this.loginForm.uuid = uuid
				}
			},
			async register(){
				const valid = await this.$refs.uForm.validate().catch(() => false)
				if(valid){
					await api.registerAcc({...this.loginForm, password: this.loginForm.confirmPassword})
					uni.$showMsg('注册成功')
					this.resetLoginForm()
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						});
					}, 1000)
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: calc(100vh - 90rpx);
		background-color: #f8f9fa;
    padding-top: 30rpx;
	}
  .register-form{
    padding: 25rpx 50rpx 35rpx;
    background-color: #fff;
   	height: calc(100vh - 90rpx);
		&::v-deep .u-radio__text{
			margin-right: 15rpx;
		}
  }
  .content::v-deep .u-form-item__body__left__content__label{
		width: 120rpx;
    margin-bottom: 15rpx;
	}
  .btns{
    width: calc(100% - 140rpx);
    padding: 0 70rpx;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 150rpx;
  }
  .btns::v-deep .u-button{
    width: 240rpx;
    border-radius: 12rpx;
  }
	.imageCode-content{
		display: flex;
		.imageCode-content-img{
			width: 190rpx;
			height: 70rpx;
			margin-left: 15rpx;
		}
	}
</style>
